<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单处理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			tr>td:nth-child(1) {
				text-align: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form>
				<table>
					<tr>
						<td>用户名：</td>
						<td>
							<input type="text" v-model="userInfo.username" />
						</td>
					</tr>
					<td>年龄：</td>
					<td>
						<!-- 使用.number修饰符将年龄由字符串转为数值类型 -->
						<input type="number" min="1" max="100" v-model.number="userInfo.age" />
					</td>
					<tr>
						<td>电子邮箱：</td>
						<td>
							<!-- 使用.lazy修饰符将数据同步由input事件延后到change事件 -->
							<input type="email" v-model.lazy="userInfo.email" />
						</td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<input type="radio" name="sex" id="man" value="男" v-model="userInfo.sex" /><label for="man">男&emsp;</label>
							<input type="radio" name="sex" id="women" value="女" v-model="userInfo.sex" /><label for="women">女&emsp;</label>
							<input type="radio" name="sex" id="secret" value="保密" v-model="userInfo.sex" /><label for="secret">保密</label>
						</td>	
					</tr>
					<tr>
						<td>所在城市：</td>
						<td>
							<select v-model="userInfo.city">
								<option value="">请选择</option>
								<option value="bj">北京</option>
								<option value="sh">上海</option>
								<option value="gz">广州</option>
								<option value="sz">深圳</option>
								<option value="hz">杭州</option>
							</select>
						</td>	
					</tr>
					<tr>
						<td>爱好：</td>
						<td>
							<template v-for="val in hobbies">
								<input type="checkbox" :value="val" :id="val" v-model="userInfo.hobbies" /><label :for="val">{{val}}&emsp;</label>
							</template>
						</td>
					</tr>
					<tr>
						<td>个人介绍：</td>
						<td>
							<!-- 使用.trim修饰符去除头尾空格 -->
							<textarea style="height: 80px; width: 400px;" v-model.trim="userInfo.remark">
								
							</textarea>
						</td>
					</tr>
					<tr>
						<td>绑定对象类型：</td>
						<td>
							<input type="radio" :value="userInfo" v-model="testObj" />
						</td>
					</tr>
				</table>
			</form>
			<hr >
			<h3>请确认您填写的信息：</h3>
			<p>用户名：{{userInfo.username}}</p>
			<p>年龄：{{userInfo.age}}</p>
			<p>邮箱：{{userInfo.email}}</p>
			<p>性别：{{userInfo.sex}}</p>
			<p>所在城市：{{userInfo.city}}</p>
			<p>爱好：{{formattedHobbies}}</p>
			<p>个人介绍：{{userInfo.remark}}</p>
			<p>对象类型的值：{{testObj}}</p>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data: {
				userInfo: {
					username: '',
					email: '',
					sex: '',
					city:'',
					hobbies: [],
					remark:'',
					age: null
				},
				hobbies: ['登山', '唱歌', '跑步', '看书', '滑雪', '打游戏', '写代码', '美食'],
				testObj: {}
			},
			computed:{
				formattedHobbies: function() {
					return this.userInfo.hobbies.join(','); 
				}
			}
		})
	</script>
</html>
